<template>
  <div style="background: #F4F4F4;overflow: hidden">
    <div class="contianer" style="margin-bottom: 0">
    <!--  <div class="breadcrumb">
        首页>餐饮><span>西餐</span>
      </div>-->
      <div class="find-search" :class="{'toggle':isToggle}">
        <div>
          <label>区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：</label>
          <span :class="{isactive: isArea == 0}" @click="choseArea(0)">不限</span>
          <span
            @click="choseArea(index+1 ,item)"
            v-for="(item, index) in areas"
            :key="index"
            :class="{isactive: isArea == (index+1)}"
          >{{item}}</span>
        </div>
        <!--<div>
          <label>适合经营：</label>
          <span
            v-for="(item, index) in scopeList"
            :class="{isactive: isShopType == index}"
            @click="choseshopType(index,item.id)"
            :key="index"
          >{{item}}</span>
        </div>-->
        <div>
          <label>面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积：</label>
          <span
            v-for="(item, index) in acreageArr"
            :class="{isactive: isAcreage == index}"
            :key="index"
            @click="choseAcreage(index,item)"
          >{{item}}</span>
        </div>
        <div>
          <label>月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;租：</label>
          <span
            v-for="(item, index) in rentArr"
            :class="{isactive: isRent == index}"
            @click="choseRent(index)"
            :key="index"
          >{{item}}</span>
        </div>
        <div style="display: flex;flex-wrap: wrap">
          <label>餐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;饮：</label>
          <span
            v-for="(item, index) in shopTypeList"
            :class="{isactive: isShopType == index}"
            @click="choseshopType(index,item.id)"
            :key="index"
            style="margin-bottom: 15px"
          >{{item.name}}</span>
        </div>
<!--        <p class="center-btn" @click="toggleClick">-->
<!--          <span>显示更多筛选选项</span>-->
<!--          <img src="../../static/img/saixuan_xiala.png" :class="{rotate:isToggle}">-->
<!--        </p>-->
      </div>
      <div class="showfind" style="margin-bottom: 0;padding-top: 18px">
        <div class="find-left">
          <div class="showfind-top">
            <div>
              <p :class="{ative:active==='0'}" @click="handleClick('0')">默认排序</p>
              <p :class="{ative:active==='1'}" @click="handleClick('1')">离我最近</p>
              <p :class="{ative:active==='2'}" @click="handleClick('2')">面积排序</p>
              <p :class="{ative:active==='3'}" @click="handleClick('3')">最新上架</p>
            </div>
            <div>
              共
              <span>{{totals}}</span>个相关铺源
            </div>
          </div>
          <div v-if="ischose==1" style="background:rgba(255,255,255,1);border:1px solid rgba(221,221,221,1);cursor: pointer">
            <cards :contentItem="item" :id="1" v-for="(item,index) in searchList" :key="index"></cards>
          </div>
          <div v-else>
            <cardQuzu :contentItem="item" v-for="(item,index) in searchList" :key="index"></cardQuzu>
          </div>
          <div class="block">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="limit"
              layout="pager,next"
              :total="totals"
              next-text="下一页"
            ></el-pagination>
          </div>
        </div>
        <div v-if="false" class="find-right">
          <div class="chuzu">
            <div class="chuzu-box">
              <div>我要转店/出租</div>
              <div>我要定制找店</div>
            </div>
          </div>
          <div class="code">

          </div>
          <div class="ad-title">
            <span>看过该铺的人也在看</span>
          </div>
          <ul>
            <li v-for="(item, index) in recommendList" @click="details(item)" :key="index">
              <img :src="item.shPic | stringToArr" alt @error="errorImage"/>
              <div>
                <p>顺义新城大街45㎡<br/>小吃店转让</p>
                <p>类型：百货</p>
                <p>1.2万/月</p>
              </div>
            </li>
          </ul>
          <div class="ad-title">
            <span>开店攻略</span>
          </div>
          <div class="shop">
            <div>
              <p>
                1.客流减少怎么办？别老想着促销降价了...
              </p>
              <p>
                2.说一说你不知道的加盟套路。（上）
              </p>
              <p>
                3.说一说你不知道的加盟套路。（下）
              </p>
              <p>
                4.老板，你家餐厅的背景音乐该换了！
              </p>
              <p>
                5.转店渠道那么多为什么你的店还是迟...
              </p>
              <p>
                6.商铺租赁这三个大坑，千万别踩！
              </p>
              <p>
                7.厨师开店90%都不成功！是因为没...
              </p>
              <p>
                8.开店项目这样选，一定不会错
              </p>
              <p>
                9.开店选址，一定要做好人流分析！
              </p>
              <p>
                10.最详细的餐饮营业执照办理！
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="request" v-if="false">

    </div>
  </div>
</template>

<script>
  import cards from "@/components/card";
  import cardQuzu from "@/components/cardQuzu";

  export default {
    data() {
      return {
        choosedArea: "",
        isArea: 0,
        isAcreage: 0,
        isRent: 0,
        isShopType: 0,
        totals: 0,
        searchList: [],
        recommendList: [],
        page: 1,
        limit: 20,
        ischose: 1,
        shopTypeList: [],
        acreageArr: [
          "不限",
          "0-20㎡",
          "20㎡-50㎡",
          "50㎡-100㎡",
          "100㎡-200㎡",
          "200㎡-500㎡",
          "500㎡以上"
        ],
        rentArr: [
          "不限",
          "0-2千元",
          "2千元-5千元",
          "5千元-1万元",
          "1万元-2万元",
          "2万元-5万元",
          "5万元"
        ],
        areaList: [
          '不限', '朝阳', '海定', '东城', '西城', '丰台', '石景山'
        ],
        scopeList: ['不限', '酒楼餐饮', '服饰鞋包', '休闲娱乐', '美容美发', '生活服务', '百货超市'],
        findsList: ['不限','西餐','中餐', '堂食', '快餐小吃', '面食', '甜品', '水果', '冷饮', '咖啡', '茶艺'],
        acreageTop: "",
        acreageBottom: "",
        rentTop: "",
        rentBottom: "",
        choosedAcreageTop: "",
        choosedAcreageBottom: "",
        choosedRentTop: "",
        choosedRentBottom: "",
        choosedShopType: "",
        active: '0',
        isToggle:false
      };
    },
    computed: {
      areas() {
        return this.$store.state.areas;
      }
    },
    filters: {
      stringToArr(string) {
        let arr = string.split(",");
        if (arr[0] === "undefined" || string == "") {
          return "http://47.92.115.193/img/2020-02-26/2020022618231992.jpg";
        } else {
          return arr[0];
        }
      }
    },
    components: {
      cards,
      cardQuzu
    },
    mounted() {
      if (this.ischose === 1) {
        this.search();
      } else if (this.ischose === 2) {
        this.searchSeek();
      }
      this.getShopeTypeList();
      this.getShopeParts();
    },
    methods: {
      choseArea(num, area) {
        /* 选择地区 */
        this.isArea = num;
        this.choosedArea = area;
        if (this.ischose === 1) {
          this.search();
        } else if (this.ischose === 2) {
          this.searchSeek();
        }
      },
      details(item) {
        window.open("/#/details1/" + item.id);
      },
      //   分类
      choseshopType(num, type) {
        if (!type) {
          this.choosedShopType = "";
        } else {
          this.choosedShopType = type;
        }
        this.isShopType = num; // 用于显示第几个高亮
        if (this.ischose === 1) {
          this.search();
        } else if (this.ischose === 2) {
          this.searchSeek();
        }
      },
      //   面积分类选择
      choseAcreage(index) {
        this.isAcreage = index;
        switch (index) {
          case 0:
            this.choosedAcreageTop = "";
            this.choosedAcreageBottom = "";
            break;
          case 1:
            this.choosedAcreageTop = 0;
            this.choosedAcreageBottom = 20;
            break;
          case 2:
            this.choosedAcreageTop = 20;
            this.choosedAcreageBottom = 50;
            break;
          case 3:
            this.choosedAcreageTop = 50;
            this.choosedAcreageBottom = 100;
            break;
          case 4:
            this.choosedAcreageTop = 100;
            this.choosedAcreageBottom = 200;
            break;
          case 5:
            this.choosedAcreageTop = 200;
            this.choosedAcreageBottom = 500;
            break;
          case 6:
            this.choosedAcreageTop = 500;
            this.choosedAcreageBottom = 99999;
            break;
          case 7:
            this.choosedAcreageTop = this.acreageTop;
            this.choosedAcreageBottom = this.acreageBottom;
            break;
        }
        if (this.ischose === 1) {
          this.search();
        } else if (this.ischose === 2) {
          this.searchSeek();
        }
      },
      //月租分类选择
      choseRent(num) {
        this.isRent = num;
        this.isChoosedRent = true;
        switch (num) {
          case 0:
            //
            this.choosedRentTop = "";
            this.choosedRentBottom = "";
            break;
          case 1:
            this.choosedRentTop = 0;
            this.choosedRentBottom = 20;
            break;
          case 2:
            this.choosedRentTop = 20;
            this.choosedRentBottom = 50;
            break;
          case 3:
            this.choosedRentTop = 50;
            this.choosedRentBottom = 100;
            break;
          case 4:
            this.choosedRentTop = 100;
            this.choosedRentBottom = 200;
            break;
          case 5:
            this.choosedRentTop = 200;
            this.choosedRentBottom = 500;
            break;
          case 6:
            this.choosedRentTop = 500;
            this.choosedRentBottom = 99999;
            break;
          case 7:
            this.choosedRentTop = this.rentTop;
            this.choosedRentBottom = this.rentBottom;
            break;
        }
        if (this.ischose === 1) {
          this.search();
        } else if (this.ischose === 2) {
          this.searchSeek();
        }
      },
      handleCurrentChange(e) {
        this.page = e;
        this.search();
      },
      chose(index) {
        this.ischose = index;
        if (this.ischose === 1) {
          this.search();
        } else if (this.ischose === 2) {
          this.searchSeek();
        }
      },
      getShopeParts() {
        // 配套设施
        this.$http.get(this.$api.getShopsParts()).then(res => {
          if (res.data.code === 0) {
            this.$store.state.partsArr = res.data.Partss;
          }
        });
      },
      getShopeTypeList() {
        // 商铺类型 美食餐饮
        this.$http.get(this.$api.getShopsTypes()).then(res => {
          if (res.data.code === 0) {
            this.shopTypeList = res.data.ShopsTypes;
          }
        });
      },
      searchSeek() {
        this.$http
          .get(this.$api.searchSeeks(), {
            params: {
              reType: this.ischose,
              province: this.$store.state.provinceG,
              city: this.$store.state.cityG,
              arer: this.choosedArea,
              acreage1: this.choosedAcreageTop,
              acreage2: this.choosedAcreageBottom,
              rentPrice1: this.choosedRentTop,
              rentPrice2: this.choosedRentBottom,
              shType: this.choosedShopType,
              page: this.page,
              limit: this.limit
            }
          })
          .then(res => {
            if (res.data.code === 0) {
              if (res.data.page) {
                this.searchList = res.data.page.list;
                this.totals = res.data.page.totalCount;
                this.recommendList = res.data.recommend;
              } else {
                this.searchList = [];
                this.totals = 0;
              }
            }
          });
      },
      search() {
        this.$http
          .get(this.$api.searchShops(), {
            params: {
              reType: this.ischose,
              province: this.$store.state.provinceG,
              // city: this.$store.state.cityG,
              city: "",
              arer: this.choosedArea,
              acreage1: this.choosedAcreageTop,
              acreage2: this.choosedAcreageBottom,
              rentPrice1: this.choosedRentTop,
              rentPrice2: this.choosedRentBottom,
              shType: this.choosedShopType,
              page: this.page,
              limit: this.limit
            }
          })
          .then(res => {
            if (res.data.code === 0) {
              if (res.data.page) {
                this.searchList = res.data.page.list;
                this.totals = res.data.page.totalCount;
              } else {
                this.searchList = [];
                this.totals = 0;
              }
              this.recommendList = res.data.recommend;
            }
          });
      },
      handleClick(index) {
        this.active = index
      },
      toggleClick(){
        this.isToggle = !this.isToggle
      }
    }
  };
</script>
<style scoped lang="less">
  .ad-title {
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    border-left: 3px solid rgba(228, 30, 29, 1);

    span {
      margin-left: 9px;
    }
  }

  .breadcrumb {
    line-height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 25px;
    margin-bottom: 10px;

    span {
      color: #E41E1D;
    }
  }

  .find-search {
    background: #fff;
    padding: 21px 0 0 12px;
    color: #333333;
    width: 1200px;
    font-size: 14px;
    height: 160px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(221, 221, 221, 1);
    line-height: 11px;
    position: relative;
    transition: all 300ms;
    &.toggle{
      height: 200px;
    }
    label {
      color: #F11F0F;
      width: 65px;
      display: inline-block;
    }

    > div {
      span {
        cursor: pointer;
        margin-right: 15px;
      }

      margin-bottom: 19px;
    }

    .center-btn {
      width: 242px;
      height: 30px;
      line-height: 30px;
      background: rgba(255, 255, 255, 1);
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 1px 0 8px 0 rgba(163, 160, 161, 0.53);

      span {
        line-height: 11px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(241, 31, 15, 1);
        margin-right: 8px;
      }
      .rotate{
        transform: rotate(180deg);
      }
    }
  }

  .block {
    padding: 20px 0;
    text-align: center;
  }

  .find-right,
  .find-left,
  .showfind,
  .showfind-top {
    width: 100%;
  }

  .find-left {
    margin-right: 20px;
    background: #fff;
   // width: calc(100% - 280px);
  }

  .find-right {
    background: none;
    width: 260px;

    .chuzu {
      height: 150px;
      background: rgba(255, 227, 217, 1);
      display: flex;
      align-items: center;
      justify-content: center;


      .chuzu-box {
        width: 100%;
        margin: 10px;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: rgba(255, 255, 255, 1);

        > div {
          width: 220px;
          height: 43px;
          background: rgba(228, 30, 29, 1);
          border: 1px solid rgba(241, 31, 15, 1);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          &:last-child {
            background: rgba(255, 105, 0, 1);
            border: 1px solid rgba(255, 105, 0, 1);
            margin-top: 12px;
          }
        }
      }
    }

    ul {
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(238, 238, 238, 1);
      margin-top: 10px;
      margin-bottom: 29px;

      li {
        position: relative;
        margin: 21px 0 15px 20px;
        cursor: pointer;
        display: flex;

        img {
          width: 90px;
          height: 67px;
          background: rgba(255, 209, 206, 1);
          margin-right: 10px;
        }

        > div {
          p:nth-of-type(1) {
            font-size: 14px;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            line-height: 14px
          }

          p:nth-of-type(2) {
            font-size: 12px;
            font-weight: 400;
            color: rgba(147, 153, 165, 1);
            line-height: 11px;
            margin-top: 8px;
            margin-bottom: 5px;
          }

          p:nth-of-type(3) {
            font-size: 14px;
            font-weight: bold;
            color: rgba(228, 30, 29, 1);
            line-height: 12px;
          }
        }
      }
    }
  }

  .showfind {
    margin: 20px 0;
    display: flex;

    .showfind-top {
      display: flex;
      justify-content: space-between;
      width: 915px;
      height: 35px;
      background: rgba(255, 255, 255, 1);
      margin-bottom: 19px;

      > div {
        &:first-child {
          display: flex;

          p {
            padding: 0 33px;
            height: 35px;
            background: #fff;
            line-height: 11px;
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-right: 1px solid rgba(221, 221, 221, 1);
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            border-top: 1px solid rgba(221, 221, 221, 1);
            color: #666666;

            &.ative {
              background-color: #F11F0F;
              color: rgba(255, 255, 255, 1);
            }

            &:first-child {
              border-left: 1px solid rgba(221, 221, 221, 1);
            }
          }
        }

        &:last-child {
          display: flex;
          align-items: center;
          line-height: 11px;
          font-size: 12px;
          font-weight: 400;
          color: #666666;
          margin-right: 42px;

          span {
            color: #E41E1D;
          }
        }
      }
    }
  }

  .contianer {
    width: 1200px;
    margin: 20px auto;
    text-align: left;
    font-size: 16px;
  }


  .isactive {
     color: #E41E1D;
  }

  .find-chose {
    border-bottom: 1px solid #f5f5f5;

    span {
      padding: 2px 5px;
    }
  }

  .choseActive {
    outline: 2px solid #ff5001;
  }

  .list-title {
    width: 915px;
    height: 35px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(221, 221, 221, 1);
  }

  .code {
    height: 131px;
    display: flex;
    margin-bottom: 26px;
    background: url("../../static/img/appxiaz.png") no-repeat center /100%;
  }

  .shop {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    margin-top: 10px;

    > div {
      margin: 21px;

      p {
        font-size: 12px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .request{
    width:292px;
    height:142px;
    background: url("../../static/img/msfk.png") no-repeat center /100%;
    position: fixed;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #E41E1D;
    border:none;
  }
  /deep/ .el-pager li{
    padding: 0;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border:1px solid rgba(221,221,221,1);
    font-weight: normal;
  }
  /deep/ .el-pagination .btn-next, .el-pagination .btn-prev{
    width: 60px;
    height: 34px;
    border:1px solid rgba(221,221,221,1);
    font-weight: normal;
    padding: 0!important;
  }
</style>
